<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />
    <title>WS scrcpy</title>
    <style>
        #item{
            z-index: 10;
            position: absolute;
            left: 0px;
            right: 0px;
            width: 25px; 
            height: 25px;
            border-radius: 7px;
            background-color: #406d7d64;
        }
        #menu {
            position: absolute;
            bottom: 0px;
        }
        .menuItem {
            width: 66px; 
            text-align: center;
            width: 50%; 
            height: 35px;
            z-index: 11;
            margin-top: 3px;
            background-color: #999797;
            user-select: none;
            margin-left: 25%;
            line-height: 35px;
            
        }
        .menuItem:hover {
            background-color: #2ebbc5;
        }
    </style>
        <script defer src="scrcpy/bundle.js"></script>
        <link href="scrcpy/main.css" rel="stylesheet">
</head>
<body>
    <!-- 调试信息框 -->
    <div id="msg" style="position: absolute; top: 0px; right: 0px;z-index: 11;display: none"></div>
    <!-- 浮动按钮 -->
    <div id="item"></div>
    <!-- 操作菜单 -->
    <div style="width: 100%;z-index: 11;display: none" id="menu">
        <div class="menuItem" id="flushPage">
            刷新页面
        </div>
        <div class="menuItem" onclick="ch()">
            全屏
        </div>
        <div class="menuItem" id="debugButton">
            页面信息打印
        </div>
        <div class="menuItem" id="addFPS">
            提升帧率
        </div>
        <div class="menuItem" id="reduceFPS" >
            降低帧率
        </div>
        <div class="menuItem" id="addPX" >
            添加清晰度
        </div>
        <div class="menuItem"  id="reducePX" >
            降低清晰度
        </div>
        <div class="menuItem" id="addScreen" >
            放大
        </div>
        <div class="menuItem"  id="reduceScreen" >
            缩小
        </div>
        <div class="menuItem" id="menuClose" >
            取消
        </div>
    </div>
</body>
<script>
    let menuShow = true;
    let item = document.getElementById("item");
    let menu = document.getElementById("menu");
    let menuClose = document.getElementById("menuClose");
    let debugButton = document.getElementById("debugButton");
    let flushPage = document.getElementById("flushPage");
    let msg = document.getElementById("msg");

    /**操作彩带控制*/
    item.onclick = ()=>{
        menu.style.display = "block"
        item.style.display = "none"
    }
    menuClose.onclick = ()=>{
        menu.style.display = "none"
        item.style.display = "block"
    }
    
    /** 移动端触控操作 */
    item.ontouchmove = (e)=>{
        item.style.left = e.touches[0].clientX+"px";
        item.style.top = e.touches[0].clientY+"px";
    }
    /**消息框*/
    debugButton.onclick = ()=>{
        if(msg.style.display == "none"){
            msg.style.display = "block"
        }else{
            msg.style.display = "none"
        }
    }

    /**页面布局刷新*/
    flushpage.onclick = ()=>{
        let view = document.getElementsByClassName("device-view")[0];
        view.style.position = "absolute";
        view.style.left = "calc( 50% - "+view.clientWidth/2+"px )";
        view.style.top = "calc( 50% - "+view.clientHeight/2+"px )";
    }
    var screen = false;
    function ch(){
        if(screen){
            fullScreen()
        }else{
            fullScreenExit 
        }
        screen = !screen
    }
    function fullScreen(){
        let elem = document.documentElement;
        // 进入全屏模式
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) { // Safari
            (elem).webkitRequestFullscreen();
        } else if ((elem).msRequestFullscreen) { // IE
            (elem).msRequestFullscreen();
        }
    }

    function fullScreenExit(){
        let elem = document.documentElement;
        if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
    }

</script>
</html>
